<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="js/vue2.7.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/elementui.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/ui.css"/>

</head>
<body>
    
    <div id="app">

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="locationId" label="省份ID" width="120">
            </el-table-column>
            <el-table-column fixed prop="provinceName" label="省份名称" width="150">
            </el-table-column>
            <el-table-column prop="curedCount" label="康复人数" width="120">
            </el-table-column>
            <el-table-column prop="deadCount" label="死亡人数" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click=del(scope.row.locationId)>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
			    background
			    layout="prev, pager, next"
			    :total="1000">
			  </el-pagination>
			  <el-dialog
			    title="提示"
			    :visible.sync="dialogVisible"
			    width="30%"
			    :before-close="handleClose">
			   省份编号:<el-input placeholder="请输入内容" v-model="no" style="width: 80%;" clearable></el-input>
			   <br /><br />
			   省份名字:<el-input placeholder="请输入内容" v-model="name" style="width: 80%;" clearable></el-input>
			   <br /><br />
			   确诊人数:<el-input placeholder="请输入内容" v-model="quenum" style="width: 80%;" clearable></el-input>
			   <br /><br />
			   死亡人数:<el-input placeholder="请输入内容" v-model="siwnum" style="width: 80%;" clearable></el-input>
			   <br /><br />
			    <span slot="footer" class="dialog-footer">
			      <el-button @click="dialogVisible = false">取 消</el-button>
			      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			    </span>
			  </el-dialog>


    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data: {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            },
            methods:{
                del(id){
                    //alert(id);
                    this.$confirm('此操作将永久删除该文件，是否继续？','提示',{
                        confirmButtonText: '确定',
				        cancelButtonText: '取消',
			            type: 'warning'
					    }).then(() => {
					        this.$message({
					            type: 'success',
					            message: '删除成功!'
						      });
						    }).catch(() => {
	        			        this.$message({
					            type: 'info',
					            message: '已取消删除'
					          });          
					        });
                },
                update(){
                    this.dialogVisible=true;
                    this.no=row.locationId;
					this.name=row.provinceName;
					this.quenum=row.currentConfirmedCount;
					this.siwnum=row.deadCount;

                }
            },
            created(){  //初始化函数，无需调用直接运行
                //发送请求
                axios.get("js/quanguo.json")
                .then(res=>{
                    console.log(res)
                    //将返回来的数据绑定到表格变量上
                    this.tableData=res.data;
                })
            }
        })
    </script>
</body>
</html>